import React from 'react';
import UserList from './list';
import CommonListsIndex from '../../../../components/CommonLists/index';
import { Tooltip, Row, Col, Tag, Button } from 'antd';
import FilterTool from '../../../../components/FilterTool';
import { apiUrlDataGatewayFee } from '../../../../services/createServices';

class FeeDetailIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'feeDetail';
    this.listsComponent = UserList;
    this.model_width = 400;
    this.typeLabelAll = [ // 计费方式
      { type: 0, value: '免费' },
      { type: 1, value: '单次计费 ' },
      { type: 2, value: '包年' },
      { type: 3, value: '包次' },
      { type: 4, value: '梯度计算' }
    ]
    this.statusTypeAll = [ // 状态
      { status: 0, value: '失败' },
      { status: 1, value: '成功' }
    ]
    this.initQueryPanigation = {
      // 初始化分页参数
      page: 1,
      size: 10,
    };
    this.queryPanigation = this.initQueryPanigation; //分页参数
  }
  componentDidMount() {
    // this.freshQueryList();
  }

  // 分页回调
  onChangePagination = (pageNumber, type = 'current_page') => {
    const t = type === 'current_page' ? 'page' : 'size'
    this.updatePanagaition && this.updatePanagaition({
      [t]: pageNumber,
    });
    this.freshQueryList();
  };

  refreshFilter = (params, type) => {
    this.queryParams = params;
    if (params.startTime) params.startTime = params.startTime.split(' ')[0] + '-' + params.startTime.split(' ')[1]
    if (params.endTime) params.endTime = params.endTime.split(' ')[0] + '-' + params.endTime.split(' ')[1]
    if (type === false) return
    this.freshQueryList(params);
  };

  getColumns = () => {
    return [
      {
        title: '计费时间',
        key: 'feeTime',
        dataIndex: 'feeTime',
        ellipsis: true,
        width: 100,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '流水号',
        key: 'requestId',
        dataIndex: 'requestId',
        ellipsis: true,
        width: 100,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '供应商',
        key: 'supplierName',
        dataIndex: 'supplierName',
        ellipsis: true,
        width: 100,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      // {
      //   title: 'AppKey',
      //   key: 'appKey',
      //   dataIndex: 'appKey',
      //   ellipsis: true,
      //   width: 100,
      //   render: (text, record) => {
      //     return (
      //       <Tooltip title={text} placement='topLeft'>
      //         {text}
      //       </Tooltip>
      //     );
      //   }
      // },
      {
        title: '数据源',
        key: 'thirdInterfaceName',
        dataIndex: 'thirdInterfaceName',
        ellipsis: true,
        width: 100,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '数据源计费方式',
        key: 'thirdType',
        dataIndex: 'thirdTypeLabel',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '数据源单价(元)',
        dataIndex: 'thirdPrice',
        key: 'thirdPrice',
        ellipsis: true,
      },
      // {
      //   title: '机构名',
      //   dataIndex: 'organName',
      //   key: 'organName',
      //   ellipsis: true,
      //   render: (text, record) => {
      //     return (
      //       <Tooltip title={text} placement='topLeft'>
      //         {text}
      //       </Tooltip>
      //     );
      //   }
      // },
      {
        title: '调用接口',
        dataIndex: 'innerInterfaceName',
        key: 'innerInterfaceName',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: (
          <>
            {this.getFilterTitle('状态', this.statusTypeAll, 'status', this.refreshTableFilter, [
              'status',
              'value'
            ])}
          </>
        ),
        width: 80,
        key: 'status',
        ellipsis: true,
        render: (text, record) => {
          return (
            <>
              {record.status === 1 ? <Tag color='green'>{record.statusLabel}</Tag>
                : <Tag color='red'>{record.statusLabel}</Tag>}
            </>
          );
        }
      },
      {
        title: (
          <>
            {this.getFilterTitle('接口计费方式', this.typeLabelAll, 'type', this.refreshTableFilter, [
              'type',
              'value'
            ])}
          </>
        ),
        dataIndex: 'innerTypeLabel',
        key: 'innerType',
        ellipsis: true,
        width: 120,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '接口单价(元)',
        dataIndex: 'innerPrice',
        key: 'innerPrice',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
    ];
  };

  // 下载
  download = () => {
    var a = document.createElement('a');
    let url = this.getParamsUrl(`${apiUrlDataGatewayFee}/std-feeDetail/feeDetail/download`, { ...this.queryParams, ...this.queryTableParams })
    a.download = '计费明细' //自定义下载文件名称
    a.href = url;
    a.click();
  }

  // 处理get 参数
  getParamsUrl(url, params) {
    if (Object.keys(params).length !== 0) {
      let str = '';
      for (const key in params) {
        str = str !== '' ? `${str}&${key}=${params[key]}` : `${key}=${params[key]}`;
      }
      return `${url}?${str}`;
    } else {
      return url;
    }
  }

  render() {
    const { records, current, total, size } = this.state;
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Input',
        key: 'requestId',
        name: 'requestId',
        defaultValue: '',
        placeholder: '请输入流水号进行搜索'
      },
      {
        type: 'rangepicker',
        key: 'start',
        name: ['startTime', 'endTime'],
        placeholder: ['计费周期开始', '计费周期结束'],
        disabledDate: (current) => false,
      },
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入供应商|数据源|调用接口进行搜索'
      }
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={2} style={{ textAlign: 'middle' }}>
            <Button type='primary' onClick={this.download}>
              下载
            </Button>
          </Col>
          <Col span={22}>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              refresh={this.resetList}
              justify='end'
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            list={records}
            currentPage={current}
            totalCount={total}
            pageSize={size}
            rowKey='requestId'
            columns={this.getColumns()}
            queryList={this.freshQueryList}
            onChangePagination={this.onChangePagination}
          />
        </div>
      </div>
    );
  }
}

export default FeeDetailIndex;
